<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="95rpx" rightWidth="95rpx" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<view class="tab-nav flex-r ac jc">
				<view class="tab-list flex-c ac jc" :class="{'active': tabCur == index}" v-for="(item,index) in tabList" :key="index" @tap="tabChange(index)">
					<text class="text-regular">{{item.name}}</text>
				</view>
			</view>
		</uni-nav-bar>
		<view class="head color-grey">
			<view class="match-info text-secondary flex-r ac jc" v-if="match">
				<view class="left">[主] {{match.homeNameZh}}</view>
				<view class="center">VS</view>
				<view class="right">{{match.awayNameZh}} [客]</view>
			</view>
		</view>
		<view class="body bottom-ios flex-c">
			<view class="body-head flex-r" v-if="matchZsList[zsType]">
				<template v-for="(item,index) in footTabCurList[tabCur]">
					<view class="item" :class="{'w90':item.name=='平局'||item.name=='客胜'||item.name=='返还率'||item.name=='主胜','w150':item.name=='时间'}" :key="index">
						<text>{{item.name}}</text>
					</view>
				</template>
			</view>
			<view class="body-detail flex-r" v-if="matchZsList[zsType]">
				<view class="left flex-c" @touchend.stop @touchstart.stop>
					<view class="left-list">
						<view class="list-item flex-r" v-for="(item, index) in matchZsList[zsType]" :key="index" @tap="leftChange(index)" :class="{'active': index == leftCur}">
							<view class="select-icon">
								<image v-show="index == leftCur" src="@/public/images/match/hk_st.png" mode="aspectFill"></image>
							</view>
							<view class="name">
								<!-- <text class="text-hidden">{{ item.companyName.match(/^[\u4e00-\u9fa5]+$/gi) ? item.companyName.slice(0, 1) : item.companyName.slice(0, 2)}}*</text> -->
								<text class="text-hidden">{{ item.companyName }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="right flex-c" v-if="matchZsList[zsType][leftCur].oddsDetails">
					<template v-for="(zs, index) in matchZsList[zsType][leftCur].oddsDetails">
						<view class="zs-item flex-r" v-if="zs.matchStatus != 1">
							<view class="item" :class="{'w90': tabCur == 1}">
								<text :style="[{ color: getColor(index, 'homeWin') }]">{{zs.closingFlag ? '-' : zs.homeWin}}</text>
							</view>
							<view class="item" :class="{'w90': tabCur == 1}">
								<text :style="[{ color: getColor(index, 'drawWin') }]">{{zs.closingFlag ? '封' : zs.drawWin}}</text>
							</view>
							<view class="item" :class="{'w90': tabCur == 1}">
								<text :style="[{ color: getColor(index, 'awayWin') }]">{{zs.closingFlag ? '-' : zs.awayWin}}</text>
							</view>
							<view class="item w90 color-grey" v-if="tabCur == 1">
								<text>{{getBackRate(zs)}}</text>
							</view>
							<view class="item w150 color-blue">
								<text>{{zs.matchTime}}'</text>
							</view>
							<view class="item">
								<text>{{zs.score}}</text>
							</view>
						</view>
					</template>
					<view id="sqzs" class="zs-title color-blue">
						<text>-  赛前  -</text>
					</view>
					<template v-for="(zs, index) in matchZsList[zsType][leftCur].oddsDetails">
						<view class="zs-item flex-r" v-if="zs.matchStatus == 1">
							<view class="item" :class="{'w90': tabCur == 1}" :style="[{ color: getColor(index, 'homeWin') }]">
								<text>{{zs.closingFlag ? '-' : zs.homeWin}}</text>
							</view>
							<view class="item" :class="{'w90': tabCur == 1}" :style="[{ color: getColor(index, 'drawWin') }]">
								<text>{{zs.closingFlag ? '封' : zs.drawWin}}</text>
							</view>
							<view class="item" :class="{'w90': tabCur == 1}" :style="[{ color: getColor(index, 'awayWin') }]">
								<text>{{zs.closingFlag ? '-' : zs.awayWin}}</text>
							</view>
							<view class="item w90 color-grey" v-if="tabCur == 1">
								<text>{{getBackRate(zs)}}</text>
							</view>
							<view class="item w150 color-grey">
								<uni-dateformat :date="zs.updateTime*1000" format="MM.dd hh:mm"/>
							</view>
							<view class="item">
								<text>-</text>
							</view>
						</view>
					</template>
					<view class="foot" v-if="isShow">
						<button type="default" size="mini" @tap="scrollPage(true)">赛前</button>
					</view>
				</view>
			</view>
			<EmptyContent v-else top="200rpx" text="暂无内容" img="qsy_zwxl" @refresh="getMatchZsList"></EmptyContent>
		</view>
	</view>
</template>

<script>
	import matchzs from "./mixin/matchzs.js";
	export default {
		mixins: [matchzs],
		data() {
			return {
				sportId: 1,
				tabList: [
					{name: "让球", type:"asia"},
					{name: "胜平负", type:"eu"},
					{name: "总进球", type:"bs"},
					{name: "角球", type:"cr"},
				],
				footTabCurList:[
					[{name:"公司"},{name:"主队"},{name:"走势"},{name:"客队"},{name:"时间"},{name:"比分"}],
					[{name:"公司"},{name:"主胜"},{name:"平局"},{name:"客胜"},{name:"返还率"},{name:"时间"},{name:"比分"}],
					[{name:"公司"},{name:"多"},{name:"走势"},{name:"少"},{name:"时间"},{name:"比分"}],
					[{name:"公司"},{name:"多"},{name:"走势"},{name:"少"},{name:"时间"},{name:"角球"}],
				],
			}
		},
		computed: {
			getBackRate() {
				return (zs) => {
					let rate = 1 / (1 / zs.homeWin + 1/zs.drawWin + 1/zs.awayWin)
					return (rate*100).toFixed(2)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/public/css/matxhZs.scss";
</style>
